<template>
    <el-form ref="formData" :model="formData" :rules="rules" label-width="80px" @submit.prevent="onSubmit" style="margin:20px;width: 60%;min-width:600px;">
        <el-form-item label="旧密码" prop="oldpwd">
            <el-input :type="oldpwdType" v-model="formData.oldpwd" placeholder="请输入旧密码"></el-input>
            <span class="show-pwd" @click="showOldPwd"><i class="fa " :class="oldfaType" aria-hidden="true"></i></span>
        </el-form-item>
        <el-form-item label="新密码" prop="newpwd">
            <el-input :type="newpwdType" v-model="formData.newpwd" placeholder="请输入新密码"></el-input>
            <span class="show-pwd" @click="showNewPwd"><i class="fa " :class="newfaType" aria-hidden="true"></i></span>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkpwd">
            <el-input :type="checkpwdType" v-model="formData.checkpwd" placeholder="请再次输入新密码"></el-input>
            <span class="show-pwd" @click="showCheckPwd"><i class="fa " :class="checkfaType" aria-hidden="true"></i></span>
        </el-form-item>
        <el-form-item>
            <el-button type="danger" @click.prevent="submitUpdate" :loading="submitLoading">确认修改</el-button>
            <el-button @click.native.prevent="reset">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "update-p-w-d",
        data(){
            return{
                formData:{
                    oldpwd:'',
                    newpwd:'',
                    checkpwd:'',
                },
                submitLoading:false,
                oldpwdType:'password',
                newpwdType:'password',
                checkpwdType:'password',
                oldfaType:'fa-eye',
                newfaType:'fa-eye',
                checkfaType:'fa-eye',
                rules:{

                }
            }
        },
        methods:{
            showOldPwd:function () {
                this.oldpwdType = this.oldpwdType === 'password' ? 'text' : 'password';
                this.oldfaType = this.oldfaType === 'fa-eye' ? 'fa-eye-slash' : 'fa-eye';
            },
            showNewPwd(){
                this.newpwdType = this.newpwdType === 'password' ? 'text' : 'password';
                this.newfaType = this.newfaType === 'fa-eye' ? 'fa-eye-slash' : 'fa-eye';
            },
            showCheckPwd(){
                this.checkpwdType = this.checkpwdType === 'password' ? 'text' : 'password';
                this.checkfaType = this.checkfaType === 'fa-eye' ? 'fa-eye-slash' : 'fa-eye';
            },
            submitUpdate(){
                this.submitLoading = true;

                const user = {
                    id:JSON.parse(localStorage.getItem("CurrentUser")).id,
                    password:this.formData.oldpwd,
                    newPassword:this.formData.newpwd,
                    checkPassword:this.formData.checkpwd
                };
                this.$http.post("/api/user/modifyPwd",user).then(res => {
                    if(res.data.code){
                        this.$message.error(res.data.msg);
                    }else{
                        this.$message.success(res.data.msg);
                        this.reset();
                    }
                }).catch(error => {
                     if(error){
                         console.log(error);
                     }
                });
                this.submitLoading = false;
            },
            reset(){
                this.$refs.formData.resetFields();
            }
        }
    }
</script>

<style scoped>
    .show-pwd {
        position: absolute;
        right: 10px;
        top: 0px;
        font-size: 16px;
        cursor: pointer;
        color: #909399;
    }
</style>